<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title> 这里是你在服务器上上传的所有文件 </title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="/static/css/global.css">

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/npm.js"></script>

    <script src="https://cdn.bootcss.com/socket.io/2.3.0/socket.io.js"></script>
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container navbar-left">
            <div class="navbar-header">
                <img src="/static/favicon.ico" alt="图标" class="navbar-brand">
            </div>

            <ul class="nav navbar-nav">
                <li class="active"><a href="#">你好，{{username}}</a></li>
                <li><a href="/home">返回主页</a></li>
            </ul>

            <form action="/home" method="POST" class="navbar-form navbar-right">
                <div class="input-group">
                    <input type="submit" name="logout" id="logout" class="btn btn-danger" value="退出登录">
                </div>
            </form>
        </div>
    </nav>


    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th class="text-center">文件名</th>
                <th>文件类型</th>
                <th>文件大小</th>
            </tr>
        </thead>

        <tbody style="font-size: 1.2em;">
            {% for i in range(num) %}
            <tr>
                <td class="text-center">
                    {{file_name[i]}}
                    <a href="/static/users/{{username}}/{{file_name[i]}}" class="pull-right btn btn-success" style="padding: 0.3em; margin: 0">查看</a>
                    <button class="pull-right btn btn-danger" style="margin: 0; padding: 0.3em; margin-right: 0.4em;" onclick="delete_file('{{file_name[i]}}')">删除</button>
                </td>
                <td class="text-center">.{{file_type[i]}}</td>
                <td class="text-center">{{"%.2f" % file_size[i]}} KB</td>
            </tr>
            {% endfor %}

            {% for msg in get_flashed_messages() %}
                <tr class="warning">
                    <td colspan="3">
                        {{msg}}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    <script>
        function delete_file(file_name) {

            var formdata = new FormData();
            formdata.append('delete', true);
            formdata.append('delete_file_name', file_name);

            $.ajax({
                type: 'post',
                url: '/view_file',
                data: formdata,
                processData: false,
                contentType: false,
                success: function (data) {
                    console.log('successful delete: ' + file_name);
                    window.location.reload();
                },
                error: function (data) {
                    console.log('fail to delete: ' + file_name);
                },
            });
        }
    </script>
</body>

</html>
